<template>
	<view style="width: 100%;">
		<view class="banner">
			<image class="banner-img" :src="banner.image_url"></image>
			<view class="banner-title">{{ banner.title }}</view>
		</view>
		<view class="article-meta">
			<text class="article-author">{{ banner.source }}</text>
			<text class="article-text">发表于</text>
			<text class="article-time">{{ banner.datetime }}</text>
		</view>
		<view class="article-content"><rich-text :nodes="content"></rich-text></view>
		<view v-if="isComment">
			<view class="comment-wrap">
				<view class="input-group">
					<view class="input-row border">
						<m-input class="m-input" type="text" v-model="account" placeholder="请输入评论内容"></m-input>
					</view>
				</view>
				<view class="btn-row"><button type="primary" class="primary" @tap="bindLogin">评论</button></view>
			</view>
			<scroll-view class="list">
				<block v-for="(newsItem, newsIndex) in comment" :key="newsIndex">
					<view class="input-row border">
						<text class="title">{{newsItem.name}}：</text>
						<text class="title" style="width: 100%;">{{newsItem.content}}</text>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import service from '../../service.js';
const FAIL_CONTENT = '<p>获取信息失败</p>';
import { mapState, mapMutations } from 'vuex';
import mInput from '../../components/m-input.vue';
import uniMediaList from '@/components/uni-media-list/uni-media-list.vue';

export default {
	components: {
		mInput,uniMediaList
	},
	computed: mapState(['forcedLogin', 'hasLogin', 'userName', 'userid','timeNum']),
	data() {
		return {
			banner: {},
			account: '',
			content: '',
			comment: [],
			isComment: false
		};
	},
	onLoad(event) {
		// 目前在某些平台参数会被主动 decode，暂时这样处理。
		try {
			this.banner = JSON.parse(decodeURIComponent(event.query));
		} catch (error) {
			this.banner = JSON.parse(event.query);
		}
		console.log(this.banner);
		this.getDetail();
		uni.setNavigationBarTitle({
			title: this.banner.title
		});
	},
	methods: {
		bindLogin() {
			console.log(this.userName+'!!!!!');
			if(this.userName==null||this.userName==''){
				uni.showToast({
					icon: 'none',
					title: '请先登录'
				});
			}else
			uni.request({
				url: service.host + 'comment/save.htm',
				method: 'GET',
				data: {
					contentId: this.banner.id,
					name: service.getUsers().account,
					userid:service.getUsers().id,
					content: this.account
				},
				success: res => {
					console.log(JSON.stringify(res));
					if (res.data.code == '1') {
						this.getDetail();
						uni.showToast({
							icon: 'none',
							title: '评论成功'
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '评论失败'
						});
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		getDetail() {
			uni.request({
				url: service.host + 'detail.htm',
				method: 'GET',
				data: { id: this.banner.id },
				success: result => {
					console.log(JSON.stringify(result));
					if (result.statusCode == 200) {
						this.content = result.data.data.content;
						if (result.data.data.allowComment == '1') {
							this.isComment = true;
							this.comment=result.data.data.commentList;
						} else {
							this.isComment = false;
						}
					} else {
						this.content = FAIL_CONTENT;
					}
				}
			});
		}
	}
};
</script>

<style>
.banner {
	height: 360upx;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

.banner-img {
	width: 100%;
}

.banner-title {
	max-height: 84upx;
	overflow: hidden;
	position: absolute;
	left: 30upx;
	bottom: 30upx;
	width: 90%;
	font-size: 32upx;
	font-weight: 400;
	line-height: 42upx;
	color: white;
	z-index: 11;
}

.article-meta {
	padding: 20upx 40upx;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	color: gray;
}

.article-text {
	font-size: 26upx;
	line-height: 50upx;
	margin: 0 20upx;
}

.article-author,
.article-time {
	font-size: 30upx;
}

.article-content {
	padding: 0 30upx;
	overflow: hidden;
	font-size: 30upx;
	margin-bottom: 30upx;
}
</style>
